<script lang="ts" setup>
import { ref } from 'vue'
import shthjd from '@/views/gdjd/jdtj/components/shthjd.vue'
import ajtgjd from '@/views/gdjd/jdtj/components/ajtgjd.vue'

// 入参

// 生命周期
const shthjdRef = ref<InstanceType<typeof shthjd>>()
const ajtgjdRef = ref<InstanceType<typeof ajtgjd>>()

/*
 * tabs切换
 */
const headerIndex = ref(0)
const changeTab = (value: number) => {
  if (headerIndex.value === value) return
  headerIndex.value = value
}
</script>
<template>
  <div class="container">
    <div class="gdzljd-header">
      <button
        class="header-text"
        :class="headerIndex === 0 ? 'header-avtive' : ''"
        @click="changeTab(0)"
      >
        审核退回监督
      </button>
      <button
        class="header-text"
        :class="headerIndex === 1 ? 'header-avtive' : ''"
        @click="changeTab(1)"
      >
        案卷退改监督
      </button>
    </div>
    <div class="tabs-active">
      <!--  :optionsObj="optionsObj"
            @refresh="getTableList" 
      -->
      <shthjd ref="shthjdRef" v-if="headerIndex === 0"></shthjd>
      <!--  :optionsObj="optionsObj"
        @refresh="getTableList" -->
      <ajtgjd ref="ajtgjdRef" v-if="headerIndex === 1"></ajtgjd>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .gdzljd-header {
    padding: 0px 0px 15px 0px;
    .header-text {
      color: #4a76ab;
    }
    .header-text + .header-text {
      margin-left: 10px;
    }
    .header-avtive {
      color: #fff;
      background-color: #3c89d0;
    }
  }

  .tabs-active {
    flex: 1;
    flex-shrink: 0;
    overflow: auto;
  }
}
</style>
